<script setup>
const list = [
  {
    title: "GPU虚拟化",
    subTitle:
      "通过自有的软件虚拟化技术，而非芯片厂家的解决方案，支持多个业务同时共享GPU资源",
    content: "",
    url: "/img-1.png",
  },
  {
    title: "广域分布式文件系统",
    subTitle: "支持跨越云端，边缘和本地的数据访问，分离数据层和议算层",
    content: "- 公共算力和私有数据",
    url: "/img-2.png",
  },
  {
    title: "AI基础设施",
    subTitle: "大量使用弹性的GPU资源，支持客户的AI训练和推理",
    content: "",
    url: "/img-3.png",
  },
];
</script>
<template>
  <div class="py-[50px] space-y-[30px]">
    <div class="text-[#012e5d] text-[24px] font-bold text-center">关键技术</div>
    <div class="grid grid-cols-3 gap-[30px]">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="h-[220px] rounded-lg shadow-md border-[#eee] border-[1px] p-[30px] bg-no-repeat bg-right-bottom hover:shadow-xl"
        :style="{ backgroundImage: `url(${item.url})` }"
      >
        <div class="text-[20px] font-bold">{{ item.title }}</div>
        <div class="w-[180px] mt-[30px] text-[16px]">
          {{ item.subTitle }}
        </div>
        <div class="text-[16px]">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>
